import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== private component
const $cache 			= $Lazy.file(()=>import('#private/cache-api'))
const Box 				= $Lazy.load(()=>import('#tp/box/box'))
const Page 				= $Lazy.load(()=>import('#tp/page/page-container'))
const InfoModify 		= $Lazy.state(()=>import('./cpt/info-modify'))
const CaseinfoTable 	= $Lazy.state(()=>import('./cpt/caseinfo-table'))
const ImgEdit 			= $Lazy.state(()=>import('./cpt/img-edit'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		selectedRows:{},
		// 搜索表单列表
		forms: [
			{ label: '条码号',		name: 'spec_code' },
			{ label: '医院名称',		name: 'hosp_id',				type:'select',		loading:true },
			{ label: '状态',		name: 'status',					type:'select',		data:[{ name:'全部', value:'' },{ name:'待录入', value:'0' },{ name:'待审核', value:'1' }] },
			{ label: '接收时间',		names: ['start_at','end_at'], 	type:'date-range', 	loading:true },
		],
		pic_path: false,
	}
	query = { entry_type: 'left', status:'' }
	componentDidMount(){
		this.getSelect()
		
		this.fetch().then((data)=> {
			if(data[0]){
				this.setState({selectedKeys:[data[0].uuid], selectedRows:data[0]})
				setTimeout(()=> {
					data && this.infoFormRef.setValue(data[0])
				},700)
			}
		})
		
	}
	// 获取下拉数据
	getSelect = () => {
		const { forms, formData } = this.state
		
		$cache.then( async f => {
			$fn.setRow( forms, 'hosp_id', await f.getCache({ api:'hospital' }) )
			
			this.setState({ forms, formData })
			
		})
	}
	// paging
	fetch = () => $fn.fetch.call(this,'app-upload-pic/index')
	// 表单
	cols = [
		{ title: '条码号', 		dataIndex: 'spec_code', 	...$fn.table.spec_code },
		{ title: '送检医院', 	dataIndex: 'hosp_name', 	width:180 },
		{ title: '接收时间', 	dataIndex: 'check_time',  	...$fn.table.time},
	]
	
	controls = () =>  [
		Controls.back.call(this )	// 返回
	]
		
	render(){
		const { selectedRows, pic_path } = this.state
		return (
			<>
				<Page title='快捷录入' nobc controls={this.controls()} >
					<section className='ex fx '>
						<div className='h ex fv rel'>
							{/* 图片预览 */}
							<Box title='图片预览' small style={{height:'60%',marginBottom:5,}} flex contentClassName='fv' >
								<ImgEdit onRef ={ref=>this.imgEditRef=ref} src={pic_path?selectedRows.pic_path:selectedRows.img_url} noBg={true}/>
							</Box>
							{ SearchForm.call(this, { noRefresh:true, code: false }) }
							<div className='ex fx bcf'>
								<div className='h ex fv'>
									{/* 下左 表格 */}
									{ Table.call(this, { type:1, 
										onRow: ( rows,index )=>{
											this.infoFormRef.setState({isSweep:false})
											this.infoFormRef.setValue(rows)
											this.setState({selectedRows:rows,pic_path:false})
											this.index = index
											this.imgEditRef.reset()
											this.caseinfoTableRef.setState({selectedKeys:[]})
										},
									})}
								</div>
								<div className=' h fv bor1' style={{width:'50%'}}>
									{/* 下右 表格 */}
									<CaseinfoTable onRef={ ref => this.caseinfoTableRef = ref } 
										tableRow={(rows,index)=>{
											this.infoFormRef.setState({isSweep:false})
											this.infoFormRef.setValue(rows)
											this.setState({selectedRows:rows,pic_path:true})
											this.index = index
											this.imgEditRef.reset()
											this.setState({selectedKeys:[]})
										}} 
									/>
								</div>
							</div>
						</div>
						<div className=' h fv bor1 ml5' style={{width:'28%',minWidth:450}}>
							{/* 信息修改 */}
							<InfoModify onRef={ ref => this.infoFormRef = ref } 
								onRefresh = {()=>{
									this.fetch()
									this.caseinfoTableRef.fetch()
								}}
								auditOnRefresh = {()=>{
									this.fetch().then((data)=> {
										if(data){
											const { data } = this.state
											this.setState({selectedKeys:[data[0].uuid], selectedRows:data[0]})
											setTimeout(()=> this.infoFormRef.setValue(data[0]),700)
										}
									})
									this.caseinfoTableRef.fetch()
									this.caseinfoTableRef.setState({selectedKeys:[]})
								}}
								specData = {rows=> {this.setState({selectedRows:rows})}}
							/>
						</div>
					</section>
				</Page>
			</>
		)
	}
}

export default Index